<template>
  <div class="app_content">
    <header>
      <NuxtLink to="/">Home</NuxtLink>
      <NuxtLink to="/about">About</NuxtLink>
      <NuxtLink to="/login">Login</NuxtLink>
    </header>
    <main>
      <NuxtPage />
    </main>
    <footer></footer>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
const emits = defineEmits([]);
const props = defineProps({});
const state = reactive({});
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state });
</script>
<style lang="scss">
.app_content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  header {
    flex: 1;
    background-color: green;
    display: flex;
    justify-content: space-around;
  }
  footer {
    flex: 1;
    background-color: blue;
  }
  main {
    flex: 10;
    background-color: yellow;
  }
}
</style>
